<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>黑马一下</title>
    <style>
        #container {
            width: 800px;
            margin: 50px auto;
        }

        .searchContainer {
            width: 600px;
            height: 40px;
            margin: 0 auto;
            position: relative;
        }

        .searchContainer #keyword {
            width: 80%;
            box-sizing: border-box;
            height: 40px;
            border: none;
            padding: 0px;
            padding-left: 10px;
            position: absolute;
            left: 0px;
            top: 0;
            outline: none;
            box-shadow: 1px 1px 10px #888;
        }

        .searchContainer #btn {
            width: 19%;
            box-sizing: border-box;
            height: 40px;
            border: none;
            background-color: skyblue;
            color: white;
            position: absolute;
            left: 480px;
            top: 0;
            box-shadow: 1px 1px 15px skyblue;
            font-weight: bold;
            font-size: 16px;
            outline: none;
        }

        img {
            margin: 0 auto;
            display: block;
        }

        ul {
            list-style: none;
            width: 80%;
            position: absolute;
            top: 40px;
            border: 1px solid #ccc;
            margin: 0px;
            padding: 0px;
        }

        ul li {
            padding-left: 10px;
            height: 24px;
            line-height: 24px;
        }

        .feedback {
            background: #eee;
        }

        a {
            float: right;
            font-size: 12px;
            margin-right: 10px;
            color: #ccc;

        }
    </style>
</head>

<body>
<div id="container">
    <img src="logo.png" alt="">
    <div class="searchContainer">
        <input type="text" id="keyword" placeholder="请输入相关的关键字" autocomplete="off">
        <input type="button" id="btn" value="黑马一下">

        <ul id="list">
            <li>java</li>
            <li>spring</li>
            <li class='feedback'><a href='javascript:;'>反馈</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    let keyWordObj = document.getElementById("keyword");
    keyWordObj.oninput = function () {
        // 2. 判断输入的数据是否是空字符串
        if (keyWordObj.value == null || keyWordObj.value === ""){
        // 1. 是：将 `id='list'` 的ul标签体设置空
            document.getElementById("list").innerHTML = "";
        }else {
        // 2. 否：继续第3步
        // 3. 发送异步请求，携带者用户输入的关键字
            //2.3发送异步请求
            axios.post("/Servlet",`name=${keyWordObj.value}`).then(resp=>{
                let content="";
                let data = resp.data;
                for(let a of data){
        // 4. 将响应回来的数据拼接成多个 `<li>` 标签字符串，再将该字符串作为 `ul` 标签中
                    content+=`<li>${a.name}</li>`;
                }
        // `document.getElementById("list").innerHTML = 拼接好的字符串;`
                document.getElementById("list").innerHTML = content;
                document.getElementById("list").innerHTML += "<li style=' background: #eee'><a href='javascript:;'>反馈</a></li>";
            });
        }

    };

</script>
</body>

</html>